<template>
  <div>
    <div class="tabs">
      <button
        v-for="(tab, index) in tabs"
        :key="index"
        :class="{ active: activeTab === index }"
        @click="activeTab = index"
      >
        {{ tab.name }}
      </button>
    </div>
    <div class="tab-content">
      <component :is="tabs[activeTab].component"></component>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const props = defineProps({
  tabs: {
    type: Array,
    required: true,
  },
});

const activeTab = ref(0);
</script>

<style scoped>
.tabs {
  display: flex;
  border-bottom: 1px solid #ccc;
}

.tabs button {
  padding: 10px;
  cursor: pointer;
  border: none;
  background: none;
}

.tabs button.active {
  border-bottom: 2px solid #007bff;
  font-weight: bold;
}

.tab-content {
  padding: 20px;
}
</style>